<template>
  <div class="box">
    <div class="content">
      <!-- <div> -->
      <!--logo-->
      <div style="display: flex; align-items: center; height: 60px">
        <img src="@/assets/home/logo.png" style="width: 28px; height: 28px" />
        <div style="color: #333; font-weight: bolder; font-size: 18px">
          湖北国际贸易数字化平台
        </div>
      </div>
      <!--菜单栏-->
      <div class="menuBar">
        <el-menu
          style="width: 100%"
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">首页</el-menu-item>
          <el-submenu index="2">
            <template slot="title">通关服务</template>
            <el-menu-item index="2-1">关务市场</el-menu-item>
            <el-menu-item index="2-2">智能辅助申报</el-menu-item>
            <el-menu-item index="2-3">通关申报服务</el-menu-item>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">市场信息</template>
            <el-menu-item index="3-1">云展会</el-menu-item>
            <el-menu-item index="3-2">全球贸易信息</el-menu-item>
            <el-menu-item index="3-3">RCEP智能税则</el-menu-item>
          </el-submenu>
          <el-submenu index="4">
            <template slot="title">仓储物流</template>
            <el-menu-item index="4-1">物流市场</el-menu-item>
            <el-menu-item index="4-2">仓储市场</el-menu-item>
            <el-menu-item index="4-3">可视化供应链</el-menu-item>
          </el-submenu>
          <el-submenu index="5">
            <template slot="title">金融服务</template>
            <el-menu-item index="5-1">国际贸易金融服务</el-menu-item>
          </el-submenu>
        </el-menu>
      </div>
      <!-- </div> -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeIndex: "1",
    };
  },
  methods: {
    handleSelect(key, keyPath) {},
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 60px;
  background: #ffffff;
  .content {
    display: flex;
    width: 1200px;
    height: 60px;
    margin: 0 auto;
    .menuBar {
      display: flex;
      align-items: center;
      margin-left: 50px;
      flex: 1;
      // border-bottom: 2px solid #dcdfe6;
    }
  }
}
::v-deep .el-menu--horizontal > .el-submenu .el-submenu__title {
  color: #303133;
}
::v-deep .el-menu--horizontal > .el-menu-item.is-active {
  color: #409eff !important;
}
::v-deep .el-menu--horizontal > .el-submenu.is-active .el-submenu__title {
  color: #409eff !important;
}
::v-deep .el-menu--horizontal .el-menu .el-menu-item.is-active {
  color: #409eff;
}
::v-deep .el-menu--horizontal > .el-menu-item {
  color: #303133;
}
</style>
